<template>

  <div class="greenHand">
    <div class="greenHand-banner">
      <img :src="bannerImg" alt="新手指引">
    </div>
    <div class="greenHand-content">
      <div class="greenHand-content-advantage">
        <h6>分秒优势</h6>
        <ul>
          <li v-for="item in advantageItems">
            <img :src="item.img" :alt="item.title">
            <p>{{ item.title }}</p>
          </li>
        </ul>
      </div>
      <spliter></spliter>
      <div class="greenHand-content-mode">
        <h6>运营模式</h6>
        <div class="greenHand-content-mode-bg">
          <img :src="modeImg" alt="运营模式">
        </div>
      </div>
      <spliter></spliter>
      <div class="greenHand-content-progress">
        <h6>出借流程</h6>
        <div class="greenHand-content-progress-bg">
          <img :src="progressImg" alt="出借流程">
        </div>
      </div>
    </div>
    <spliter></spliter>
    <div class="greenHand-footer" @click.stop="AndroidOrIos">
      <good
        v-bind="newerGood"></good>
      <div class="greenHand-footer-btn-wrapper" @click.stop="AndroidOrIos">
        <comBtn v-bind="isFullObj"></comBtn>        
      </div>
      <div class="greenHand-footer-register">
        <span class="border-all-1px" @click.stop="toSignUp">注册送好礼</span>
        <p>立即开启财富之旅~</p>
      </div>
    </div>
  </div>

</template>

<script>
  import spliter from 'components/common/spliter'
  import good from 'components/good'
  import comBtn from 'components/common/comBtn'

  export default {
    data () {
      return {
        type: '', // 设备类型
        newerGood: {},
        bannerImg: require('../../assets/banner_zhiyin.png'),
        modeImg: require('../../assets/yunyingmoshi@3x.png'),
        progressImg: require('../../assets/xinshou-liucheng@3x.png'),
        advantageItems: [
          {
            img: require('../../assets/xs_advantage01@2x.png'),
            title: '股东优势'
          },
          {
            img: require('../../assets/xs_advantage02@2x.png'),
            title: '项目优势'
          },
          {
            img: require('../../assets/xs_advantage03@2x.png'),
            title: '资金安全'
          },
          {
            img: require('../../assets/xs_advantage04@2x.png'),
            title: '收益稳健'
          }
        ]
      }
    },
    computed: {
      subjectIsFull () {
        return this.newerGood.canCastAmt === 0 // 标是否已满
      },
      isFullObj () {
        let color = '#fff'
        let bgColor = '#ff4133'
        let text = '立即出借'

        if (this.subjectIsFull) {
          return {
            color: '#fff',
            bgColor: '#e5e5e5',
            text: '已满标'
          }
        } else {
          return {
            color,
            bgColor,
            text
          }
        }
      }
    },
    methods: {
      toSignUp () {
        if (this.$route.query['type'] && this.$route.query['type'] !== '') {
          window.location.href = 'nativejs://' + '{"viewNum":"1"}'
          return
        }
        this.$router.push('/signUp')
      },
      AndroidOrIos () {
        if (this.type === 'android' || this.type === 'ios') {
          const h5NativeConfig = {
            viewNum: '4',
            uuid: this.newerGood.borrowOrder
          }
          window.location.href = 'nativejs://' + JSON.stringify(h5NativeConfig)
        } else {
          return
        }
      }
    },
    created () {
      if (this.$route.query['type'] && this.$route.query['type'] !== '') {
        this.type = this.$route.query['type']
      }
      this.$http.get(`/api/borrow/borrowInfo/list?currentPage=1&numPerPage=10&borrowNewhand=1`)
        .then((res) => {
          if (res.data.success) {
            this.newerGood = res.data.data.list[0]
            console.log(this.newerGood)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    components: {
      spliter,
      good,
      comBtn
    }
  }
</script>

<style lang='scss' scoped>
  @import '../../common/scss/tool.scss';
  @import '../../common/scss/_variable.scss';

  .greenHand {
    &-banner {
      img {
        width: 100%;
      }
    }
    &-content {
      background: #fff;
      h6 {
        color: $base-666;
        font-size: 35px;
        text-align: center;
        font-weight: 500;
      }
      &-advantage {
        padding: 40px 0;
        &>ul {
          display: flex;
          padding: 40px 5% 0 5%;
          justify-content: space-around;
          font-size: 22px;
          text-align: center;
          li {
            img {
              width: 90px;
              height: 90px;
            }
            p {
              font-size: 22px;
              color: $base-666;
              margin-top: 26px;
            }
          }
        }
      }
      &-mode {
        padding: 40px 0;
        &-bg {
          margin-top: 30px;
          text-align: center;
          img {
            width: 90%;
          }
        }
      }
      &-progress {
        padding: 40px 0;
        &-bg {
          img {
            width: 90%;
            margin: 38px 5% 0 5%;
          }
        }
      }
    }
    &-footer {
      color: $base-ff6c00;
      &-btn-wrapper {
        margin: 0 auto 30px 0;
        text-align: center;
      }
      &-register {
        text-align: center;
        background: $base-f8f8f8;
        span {
          display: inline-block;
          border-radius: 6px;
          margin: 60px auto 30px auto;
          width: 220px;
          height: 64px;
          font-size: 36px;
          line-height: 70px;
          border: 1px solid $base-ff6c00;
        }
        p {
          font-size: 24px;
          padding-bottom: 60px;
        }
      }
    }
  }
</style>
